{% extends 'base.html' %}

{% block content %}
<section class="home">
    <div class="text">
        Your Attendance
            <form  method="post">
                {% csrf_token %}
                <div class="flex flex-col">
                    <div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
                      <div class="py-2 inline-block min-w-full sm:px-6 lg:px-8">
                        <div class="overflow-hidden">
                          <table class="min-w-full ">
                            <thead class="bg-white border-b">
                              <tr>
                                <th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">
                                  <div class="text" style="font-size: 18px; padding:5px 0px; color:black;">Month</div>
                                </th>
                                <th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">
                                    <div class="text" style="font-size: 18px; padding:5px 0px; color:black;">Days</div>
                                </th>
                              </tr>
                            </thead>
                            <tbody>
                                {% for info in info %}
                                <tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
                                    <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                                        {{info.month}}
                                    </td>
                                    <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                                        {{info.days}}
                                    </td>
                                  </tr>
                                
                                 {% endfor %}
                              
                            </tbody>
                          </table>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                    
            </form>     
</section>
{% endblock %}